<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-----------------弹出框----------------------------->
    <div id="spu_dlg" class="easyui-dialog" title="编辑spu" style="width:700px;height:520px;" closed="true"
         data-options="iconCls:'icon-save',resizable:true,modal:false" buttons="#spuBtns" >
        <form id="spuForm">
            <br/>
            <label>spu名称:</label>
            <input  id="spuName" name="spuName" class="easyui-textbox" data-options="" style="width:300px;"/>
            <br/><br/>
            <label>spu描述:</label>
            <input  id="description" name="description" class="easyui-textbox" data-options="multiline:true" style="width:500px;height:100px"/>
            <input id="spuId" name="spuId" type="hidden"/>
            <br/><br/>

        <!----------------商品图片列表 ----------------------->

            <!--<table id="spuImgDg" class="easyui-datagrid" title="商品图片列表" data-options="singleSelect:true,method:'get',toolbar:'#spuImgTootbar'" ></table>-->
            <table id="spuImgDg" class="easyui-datagrid" title="商品图片列表" data-options="singleSelect:true,method:'get',toolbar:'#spuImgTootbar'" ></table>

        <!----------------图片列表工具栏----------------------->
            <div id="spuImgTootbar" style="padding:5px;height:auto">
                <div style="margin-bottom:5px">
                    <a href="#" id="spuImgAdd" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加图片</a>
                    <a href="#" id="spuImgUploadBtn" class="easyui-linkbutton" iconCls="icon-save" plain="true" >图片上传</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
                </div>
            </div>

            <br/><br/>
        <!----------------销售属性列表---------------------------->
            <table id="spuSaleAttrDg" class="easyui-datagrid" title="销售属性列表" data-options="singleSelect:true,method:'get',toolbar:'#spuSaleAttrTootbar'" ></table>

        <!----------------销售属性列表工具栏----------------------->
            <div id="spuSaleAttrTootbar" style="padding:5px;height:auto"  >
                <div style="margin-bottom:5px">
                    <a href="#" id="spuSaleAttrAddBtn" class="easyui-linkbutton" iconCls="icon-add" onclick="addSpuSaleAttr()" plain="true">添加销售属性</a>
                    <a href="#" id="spuSaleAttrEditBtn" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editSpuSaleAttr()">编辑销售属性</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" >删除</a>
                </div>
            </div>
            <div th:include="spuSaleAttrPage"></div>  <!--点击：编辑spu界面点击添加销售属性按钮-->
        </form>
    </div>
    <!----------------弹出框的按钮组----------------------->
    <div id="spuBtns">
        <a href="#" class="easyui-linkbutton" onclick="saveSpu()">保 存</a>
        <a href="#" class="easyui-linkbutton" onclick="closeSpu()">关 闭</a>
    </div>
</body>
<script type="text/javascript">

    function initSpuInfoDlg(spuInfo){
        //打开对话框
        $('#spu_dlg').dialog("open");
        console.log("初始化2文本"+spuInfo);

        //初始化表单
        initSpuForm(spuInfo);

        //初始化图片表格
        initSpuImgListDatagrid(spuInfo);

        //初始化上传控件
        initUploader();

        //初始化销售属性列表
        initSpuSaleAttrListDatagrid(spuInfo);
    }

    /** 初始化表单 */
    function initSpuForm(spuInfo){
        //清空文本框
        $("#spuForm").form("clear");
    }

    /** 初始化图片表格 */
    function initSpuImgListDatagrid(spuInfo) {
        $('#spuImgDg').datagrid('loadData', {total: 0, rows: []});
        console.log("初始化表格");
        spuImgDg = $("#spuImgDg").datagrid({
            idField: 'fileId',    //标识行的主键  可以利用getRowIndex进行查询
            columns: [[
                {field: 'fileId', title: '文件编号', width: '15%'},//隐藏文件页面内部编号
                {
                    field: 'imgName', title: '图片简称', width: '20%',
                    editor: {
                        type: 'validatebox', options: {required: true}  //必填项
                    }
                },
                {field: 'imgUrl', title: '图片路径', hidden: true},  //隐藏真实路径
                {
                    field: 'progress', title: '上传进度', width: '20%',
                    formatter: function (value, row, index) {
                        console.log("更新进度条！！" + value);
                        if (!value) {
                            value = 0;
                        }
                        var htmlstr =
                            "<div class='easyui-progressbar progressbar' style='width:100px;height:20px;' value='" + value + "' text='" + value + "'%>" +
                            "<div class='progressbar-text'  style='width: 100px; height: 20px; line-height: 20px;'>" + value + "%</div>" +
                            "<div class='progressbar-value' style='width:" + value + "%; height: 20px; line-height: 20px;'>" +
                            "<div class='progressbar-text' style='width: 100px; height: 20px; line-height: 20px;'>" + value + "%</div>" +
                            "</div>" +
                            "</div>";
                        return htmlstr;
                    }
                },
                {
                    field: 'imgState', title: '上传状态', width: '20%',           //如果存在路径表示上传成功
                    formatter: function (value, row, index) {
                        console.log('row.imgUrl:' + row.imgUrl);
                        if (row.imgUrl != undefined && row.imgUrl != '') {
                            return '已上传';
                        } else {
                            return '等待上传';
                        }
                    }
                }
            ]],
            onDblClickRow: function (rowIndex, rowData) {
                //双击开启编辑行
                spuImgDg.datagrid("beginEdit", rowIndex);
                //设定当失去焦点时,退出编辑状态
                var imgName = rowData.imgName;
                $("input.datagrid-editable-input").val(imgName).bind("blur", function (evt) {
                    spuImgDg.datagrid('endEdit', rowIndex);
                });
            },
            view: detailview,
            detailFormatter: function (rowIndex, rowData) {
                return "<img src=" + rowData.imgUrl + " style='width:100px;height:100px;'>";
            }
        });
    }

    /** 初始化上传控件 */
    function initUploader(){
        console.log("初始化上传控件");

        var spuImgDg=  $("#spuImgDg");
        //初始化上传控件
        var spuImgUploader = WebUploader.create({
            auto:false,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收路径
            server: '/fileUpload',
            // 选择文件的按钮。
            pick: '#spuImgAdd',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            //设定文件大小上限 2M
            fileSingleSizeLimit:2*1024*1024,
            //可接受的文件类型
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png', // 这里可以设置上传文件的格式 xls、word等
                mimeTypes: 'image/*'
            }
        });
        console.log("初始化文件上传控件的响应--fileQueued");


        //当用户选择了文件以后，表格要进行增行
        spuImgUploader.on('fileQueued',function (file) {
            console.log("用户增加文件:"+file.id+'||'+file.name);
            var row={
                fileId:file.id, // 这里的id是控件自动生成的一个唯一的id，还能唯一识别进度条
                imgName:file.name
            };
            spuImgDg.datagrid('appendRow',row);
        });

        //上传过程中，该进度会反复触发
        spuImgUploader.on( 'uploadProgress', function( file, percentage ) {
            console.log("file: " + file.name + "---进度： " + percentage);
            var rowIndex=spuImgDg.datagrid('getRowIndex',file.id);

            var progessRow={progress:(percentage*100).toFixed(2)};

            spuImgDg.datagrid('updateRow', {index:rowIndex,row:progessRow});
        });


        // 上传成功时，要把生成的图片路径返回给表格的行中的url
        console.log("初始化文件上传控件的响应--uploadSuccess");
        spuImgUploader.on( 'uploadSuccess', function( file ,response) {
            console.log("上传完成："+file.id+"||"+response._raw);
            var fileId=file.id;
            var rowIndex = spuImgDg.datagrid('getRowIndex',file.id);//通过file.id查询到行号
            spuImgDg.datagrid('updateRow',
                {   index:rowIndex,
                    row:{imgUrl:response._raw}
                });
        });


        $('#spuImgUploadBtn').click(function(){
            console.log("开始上传");
            if(spuImgUploader.getFiles().length<=0){
                $.messager().alert('警告','没有需要上传的文件','warning');
                return;
            }
            spuImgUploader.upload();
        });
    }

    /** 初始化销售属性列表 */
    function initSpuSaleAttrListDatagrid(spuId){
        /** 清空数据*/
        var spuSaleAttrDg = $('#spuSaleAttrDg').datagrid('load',{saleAttrId: '', saleAttrName: ''});
        spuSaleAttrDg.datagrid({
            idField:'saleAttrId', // 定义唯一主键
            columns:[[
                { field:'saleAttrId',title:'销售属性Id',width:'25%'},
                { field:'saleAttrName',title:'销售属性名称',width:'25%'},
                { field:'saleAttrValueList',title:'销售属性值暂存', width:'50%', hidden:true}
            ]]
        });
    }

    /**添加销售属性按钮*/
    function addSpuSaleAttr() {
        initSpuSaleAttrDlg();// 弹出spu销售属性对话框（属性名属性值列表）
    }

    /**编辑销售属性按钮*/
    function editSpuSaleAttr() {
        var saleAttr = $('#spuSaleAttrDg').datagrid('getSelected'); // 得到当前行数据 json
        initSpuSaleAttrDlg(saleAttr);
    }

    /**保存按钮*/
    function saveSpu() {
        var spuInfoJson = {}; // 组合页面所有数据为一个json
        spuInfoJson["id"] = $("#spuId").val();
        spuInfoJson["spuName"] = $("#spuName").val(); // spu的名称
        spuInfoJson["description"] = $("#description").val(); //spu描述
        spuInfoJson["catalog3Id"] = $("#ctg3ForSpuList").combobox("getValue"); // 3级分类

        /**商品图片列表*/
        var imgRows = $("#spuImgDg").datagrid("getRows"); // 得到图片行
        for(var i = 0; i < imgRows.length; i++) {
            spuInfoJson["spuImageList["+ i + "].imgName"] = imgRows[i].imgName;
            spuInfoJson["spuImageList["+ i + "].imgUrl"] = imgRows[i].imgUrl;
        }

        /**销售属性列表*/
        var spuSaleAttrRows = $("#spuSaleAttrDg").datagrid("getRows"); // 得到销售属性行
        console.log("3333333333333");
        for(var i = 0; i < spuSaleAttrRows.length; i++) {
            spuInfoJson["spuSaleAttrList["+ i + "].saleAttrId"] = spuSaleAttrRows[i].saleAttrId;
            spuInfoJson["spuSaleAttrList["+ i + "].saleAttrName"] = spuSaleAttrRows[i].saleAttrName;
            var valueRows = spuSaleAttrRows[i].saleAttrValueList.rows;
            for(var j = 0; j < valueRows.length; j++) {
                spuInfoJson["spuSaleAttrList["+ i + "].spuSaleAttrValueList["+j+"].saleAttrId"] = spuSaleAttrRows[i].saleAttrId;
                spuInfoJson["spuSaleAttrList["+ i + "].spuSaleAttrValueList["+j+"].saleAttrValueName"] = valueRows[j].saleAttrValueName;
            }
        }
        console.log(JSON.stringify(spuInfoJson)); // 测试：将json转换为字符串打印一下

        /**将数据传入后台进行保存*/
        $.post('saveSpuInfo', spuInfoJson, function () {
            $("#spu_dlg").dialog("close");
            $("#spulist_dg").datagrid("reload");
        });
    }

    /**关闭按钮*/
    function closeSpu(){
        $("#spu_dlg").dialog("close");
    }

</script>
</html>